<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="main">
			<view class="mainInput">
				<view class="caseInput-code">
					<text class="codeBtn">新密码</text>
					<input type="password" v-model="mima" class="inp-code" placeholder="请输入新密码"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code2">
					<text class="codeBtn2">新密码确认</text>
					<input type="password" v-model="mima" class="inp-code2" placeholder="请再次确认密码"
						placeholder-class="title_input" />
				</view>
			</view>
			<view class="mainInfo">
				<text>密码可由数字和字母组合，不可使用特殊符号，密码长度为6-12位。</text>
			</view>
		</view>
		<view class="footCase">
			<view class="footBtn" @click="go">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				csdeState: false,
				phoneNum: '',
				mima: '',
			}
		},
		methods: {
			go() {
				uni.switchTab({
					url: '/src/views/pageMain/pageMine/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F0F0F0;
		height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main {
		width: 650rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: -30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mainInput {
		margin-top: 20rpx;
	}
	
	.caseInput-code {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 1px solid #B3B3B3;
		display: flex;
		align-items: center;
	}

	.inp-code {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #CCCCCC;
		line-height: 44rpx;
	}

	.codeBtn {
		width: 260rpx;
		height: 56rpx;
		background: #B3B3B3;
		border-radius: 28rpx;
		text-align: center;
		
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 56rpx;
	}
	
	.caseInput-code2 {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 1px solid #FFB607;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.inp-code2 {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #CCCCCC;
		line-height: 44rpx;
	}
	
	.codeBtn2 {
		width: 260rpx;
		height: 56rpx;
		background: #FFB607;
		border-radius: 28rpx;
		text-align: center;
		
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 56rpx;
	}
	
	::v-deep.title_input {
		color: #CCCCCC;
	}
	.mainInfo{
		font-weight: 400;
		font-size: 18rpx;
		color: #808080;
		line-height: 30rpx;
		margin-top: 50rpx;
	}
	.footCase {
		margin-top: 40%;
	}

	.footInfo {
		text-align: center;
		margin-bottom: 10rpx;
	}
	.footInfo1{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8106;
		line-height: 30rpx;
	}
	.footInfo2{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		line-height: 30rpx;
	}
	.footBtn {
		width: 650rpx;
		height: 80rpx;
		background: #FF8106;
		border-radius: 27rpx;
		text-align: center;
		
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>